<template>
<!--cart2.wxml-->
<form @submit="submitForm">
<view class="container">
    <view class="user-mes" @tap="enterAddressPageFun">       
        <view class="location">
            <block v-if="order.userAddress.province_name">
             <view class="user-contact">{{order.userAddress.consignee}}{{'　　'}}{{order.userAddress.mobile}}</view>
            <view class="address">{{order.userAddress.province_name + order.userAddress.city_name + order.userAddress.district_name + (order.userAddress.twon_name?order.userAddress.twon_name:'') + order.userAddress.address}}</view>            
            </block>            
            <block v-else>
                <view class="user-contact"></view> 
                <view class="address">请填写收货地址</view>    
            </block>
            <view class="pos-icon"><image class="wh100" src="/static/images/iconfont-address.png"></image></view>
        </view>
        <view class="border-img"><image class="wh100" src="/static/images/tt.png"></image></view>
        <view class="update-logistics">
            <image class="arrow-rigth" src="/static/images/icon-arrowdown.png"></image>
        </view>
    </view>
    <view class="order-meg">
        <view v-for="(item, index) in order.cart_list" :key="index" class="order-detail">
            <view class="goods-img">
            <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=100&height=100'"></image>
            </view>
            <navigator class="order-cont" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <view class="goods-name">{{item.goods_name}}</view>
                <view class="goods-color">{{item.spec_key_name}}</view>
            </navigator>
            <view class="order-num">
                <view class="co-red">￥{{item.member_goods_price}}</view>
                <view class="goods-num">x{{item.goods_num}}</view>
            </view>
        </view>
    </view>
    <view class="set-mes">
        <view v-if="order.store_prom">
            <icon type="info" size="16" color="#ff6a00"></icon>{{order.store_prom}}
        </view>
        <view class="invoice set-item" @tap="showInvoice">
            <view>发票信息</view>
            <view class="set-btn">
                <view>{{text}}</view>
                <image class="arrow-rigth" src="/static/images/icon-arrowdown.png"></image>
            </view>
        </view>                
    </view>
    <view class="coupon-mes">        
        <view>用户备注（50字）</view>
        <view class="leave-word">
            <textarea name="user_note" class="word-box" maxlength="50" @input="keyUpChangeNum"></textarea>
            <view class="max-word">{{maxWord}}/50</view>
        </view>
    </view>
    <!-- 价格栏 -->
    <view class="information">
         <view class="item" v-if="orderPrices.balance_price">
            <view>尾款</view>
            <view class="co-red">￥ {{orderPrices.balance_price}}元</view>  
        </view> 
        <view class="item">
            <view>{{order.pre_sell.deposit_price  > 0 ? '订金':'商品金额'}}</view>
            <view class="co-red">￥ {{orderPrices.goods_price}}元</view>  
        </view>                  
    </view>
    <view class="btn-wrap">  
        <button form-type="submit" class="tips-btn" id="submitOrder">提交订单</button>
        <view class="pay-amount">
            <view class="payable">应付金额 : </view>
            <view class="co-red">￥ {{orderPrices.order_amount}}元</view>  
        </view>
    </view>
</view>
</form>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var util = require("../../../utils/util.js");
var md5 = require("../../../utils/md5.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      goods: null,
      //立即购买商品参数
      order: null,
      //请求的订单数据
      orderPrices: null,
      //请求的订单价格数据 
      maxWord: 0,
      enterAddressPage: false,
      firstEnter: true,
      //是否第一次进入页面
      invoice_title: '个人',
      taxpayer: '',
      invoice_desc: '不开发票',
      text: '不开发票',
      formData: {
        pay_points: '',
        user_money: '',
        paypwd: '',
        user_note: ''
      },
      userInfo: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.setData({
      goods: options
    });
    this.requestCart2();
    this.requestInvoice();
    this.setData({
      userInfo: uni.getStorageSync('app:userInfo')
    });
  },
  //重新加载数据
  onShow: function () {
    this.setData({
      order: this.order
    });

    if (this.enterAddressPage) {
      this.enterAddressPage = false;
      var address = uni.getStorageSync('cart:cart2:address');

      if (address !== '') {
        uni.removeStorageSync('cart:cart2:address');
      }

      this.requestCart2(address); //改变地址要重新请求数据
    } else if (!this.firstEnter && this.checkAddressList()) {
      this.setData({
        text: this.text
      });
      this.calculatePrice(); //其他操作离开页面要重新计算价格
    }

    this.firstEnter = false;
  },
  methods: {
    /** 获取用户收货地址 */
    getDefaultAddress: function () {
      var that = this;
      request.get('/api/User/ajaxAddressList', {
        success: function (res) {
          if (res.data.result.length > 0) {
            var address = res.data.result[0] || null;
            that.setData({
              'order.userAddress': address
            });

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else {
            that.checkAddressList();
          }
        }
      });
    },

    /** 发票 */
    requestInvoice: function () {
      var that = this;
      request.get('/api/cart/invoice', {
        success: function (res) {
          if (res.data.result.invoice_title) {
            that.setData({
              text: res.data.result.invoice_desc != '不开发票' ? '纸质 ( ' + res.data.result.invoice_title + '-' + res.data.result.invoice_desc + ' )' : '不开发票',
              invoice_title: res.data.result.invoice_title,
              invoice_desc: res.data.result.invoice_desc,
              taxpayer: res.data.result.taxpayer
            });
          }
        },
        failStatus: function (res) {
          return false;
        }
      });
    },
    requestCart2: function (address) {
      var that = this;
      var data;

      if (this.goods.action) {
        //商品立即购买跳转
        data = {
          goods_num: this.goods.goods_num,
          prom_id: this.goods.prom_id
        };
      }

      request.get('/api/cart/pre_sell', {
        failRollback: true,
        data: data,
        success: function (res) {
          that.setData({
            order: res.data.result
          });

          if (address) {
            that.setData({
              'order.userAddress': address
            });

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else if (uni.getStorageSync('goodsInfo:goodsInfo:address')) {
            that.setData({
              'order.userAddress': uni.getStorageSync('goodsInfo:goodsInfo:address')
            });
            uni.removeStorageSync('goodsInfo:goodsInfo:address');

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else {
            that.getDefaultAddress();
          }
        },
        failStatus: function (res) {
          if (res.data.status == 0) {
            uni.showModal({
              title: res.data.msg,
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  uni.navigateBack();
                }
              },
              fail: function () {
                uni.navigateBack();
              }
            });
          } else if (res.data.status == -1) {
            that.setData({
              order: null
            });
            that.checkAddressList();
          }

          return false;
        }
      });
    },
    checkAddressList: function () {
      var that = this;

      if (!that.order || that.order.userAddress == null) {
        uni.showModal({
          title: '请先填写或选择收货地址~',
          success: function (res) {
            if (res.confirm) {
              that.enterAddressPageFun();
            } else {
              uni.navigateBack();
            }
          },
          fail: function () {
            uni.navigateBack();
          }
        });
        return false;
      }

      return true;
    },

    /** 显示发票信息 */
    showInvoice: function () {
      uni.navigateTo({
        url: '../../cart/invoice/invoice'
      });
    },
    keyUpChangeNum: function (e) {
      this.setData({
        maxWord: e.detail.value.length
      });
    },

    /** 请求计算价格 */
    calculatePrice: function (formData, submitOrder) {
      var that = this;

      if (typeof formData == 'undefined') {
        formData = that.formData;
      } else {
        that.formData = formData;
      }

      if (!!!that.order.userAddress) {
        return app.globalData.showTextWarining('请添加地址', function () {
          that.setData({
            enterAddressPage: true
          });
          uni.navigateTo({
            url: '../../user/address_list/address_list'
          });
        });
      }

      var postData = {
        address_id: that.order.userAddress.address_id,
        invoice_title: that.invoice_title ? that.invoice_title : '',
        taxpayer: that.taxpayer ? that.taxpayer : '',
        invoice_desc: that.invoice_desc ? that.invoice_desc : '',
        act: submitOrder ? 'submit_order' : 'order_price',
        user_note: formData.user_note,
        pre_sell_id: this.goods.prom_id,
        goods_num: this.goods.goods_num
      };
      request.post('/api/cart/pre_sell_place', {
        data: postData,
        success: function (res) {
          if (!submitOrder) {
            that.setData({
              orderPrices: res.data.result
            });
            return;
          }

          if (that.orderPrices.order_amount <= 0) {
            uni.setStorageSync('order:order_list:update', true);
            uni.redirectTo({
              url: '/pages/payment/payment/payment?order_sn=' + res.data.result + '&order_amount=' + that.orderPrices.total_amount + '&order_type=0'
            });
          } else {
            var params = {
              order_sn: res.data.result,
              order_type: 0
            };
            var url = '/pages/cart/cart4/cart4?' + util.Obj2Str(params);
            uni.redirectTo({
              url: url
            });
          }
        },
        failStatus: function (res) {
          app.globalData.confirmBox(res.data.msg);
        }
      });
    },

    /** 提交订单 */
    submitForm: function (e) {
      var submitOrder = e.detail.target.id == 'submitOrder' ? true : false;
      this.calculatePrice(e.detail.value, submitOrder);
    },
    enterAddressPageFun: function () {
      this.enterAddressPage = true;
      uni.navigateTo({
        url: '/pages/user/address_list/address_list?operate=select'
      });
    }
  }
};
</script>
<style>
/* cart2.wxss */
.user-mes{
    position: relative;
    background-color: #fff;
    font-size: 32rpx;
    color: #444;
}
.user-contact{
    padding: 24rpx 80rpx;
}
.location{
    position: relative;
    padding:0 80rpx 24rpx;
}
.pos-icon{
    position: absolute;
    left: 30rpx;
    top: 0;
    width: 32rpx;
    height: 32.5rpx;
     margin-top:48rpx
}
.border-img{
    width: 100%;
    height: 16rpx;
}
.update-logistics{
    position: absolute;
    right: 0;
    top: 0;
    width: 80rpx;
    height: 148rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow-rigth{
    width: 32rpx;
    height: 32rpx; 
}
.order-meg{
    margin-bottom: 20rpx;
    font-size: 28rpx;
}
.order-detail{
    padding: 30rpx 0;
    border-bottom: 1px solid #f3f3f3;
    color: #777;
    min-height: 120rpx;
    background-color:#fff; 
}
.goods-img{
    float: left;
    width: 100rpx;
    height: 100rpx;
    margin:0 20rpx; 
}
.order-cont{
    float: left;
    width: 400rpx;
}
.goods-name{
    max-height: 60rpx;
    line-height: 30rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
}
.goods-color{
    font-size: 24rpx;
}
.order-num{
    float: right;
    font-size: 24rpx;
    margin-top: 10rpx;
    margin-right: 20rpx;
    text-align: right;
    line-height: 42rpx;
}
.set-mes{
    background-color: #fff;
    padding: 0 20rpx;
    font-size: 30rpx;
    color: #444;
}
.set-mes>view{
    display: flex;
    align-items: center;
    height: 92rpx;
    border-bottom: 1px solid #f3f3f3;
}
.set-item{
    justify-content: space-between;
}
.set-btn{
    display: flex;
    font-size: 24rpx;
}
.set-mes input{
    width: 380rpx;
    height: 50rpx;
    line-height: 50rpx;
    border:1px solid #f3f3f3;
    margin-left:10rpx;
    padding-left:5px;

}
.use-btn{
    width: 100rpx;
    height: 50rpx;
    margin-left: 20rpx;
    line-height: 50rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
}
.coupon-mes{
    margin: 20rpx 0;
    padding: 0 20rpx;
    background-color: #fff;
    font-size: 30rpx;
    color: #444;
}
.coupon-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 92rpx;
}
.coupon-title>view{
    display: flex;    
}
.coupon-num{
    height: 36rpx;
    margin-left: 20rpx;
    padding: 0 16rpx;
    line-height: 36rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    font-size: 24rpx;
}
.leave-word{
    position: relative;
    margin: 20rpx 0;
    font-size: 24rpx;
}
.word-box{
    border:1px solid #f3f3f3;
    width: 690rpx;
    padding: 10rpx;
    height: 120rpx;
    line-height: 40rpx;
}
.max-word{
    position: absolute;
    right: 0;
    bottom: 0;
}
.information{
    padding: 0 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
}
.information .item{
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #777;
}
.btn-wrap{
    height: 100rpx;
    background-color: #fff;
}
.tips-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    background-color: #ff6a00;
}
.pay-amount{
    float: right;
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 26rpx;
    margin-right: 40rpx;
}
.payable{
    color: #444;
    margin-right: 20rpx;
}
/* 物流列表弹框 */
.shipping-modal{
    z-index: 20;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: hidden;
    color: #666666;
    background-color: white;
}
.shipping-nav{
    text-align: center;
    font-size: 35rpx;
    padding-top: 30rpx;
}
.shipping-list{
    padding: 20rpx 30rpx 40rpx;
    font-size: 28rpx;
}
.shipping-item{
    display: block;
    padding: 20rpx 0;
}
.shipping-btn{
    width: 100%;
    color: white;
    background-color: #ff6a00;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
}
.invoice-text{
    color:red;font-size:12px;
}

</style>